{% extends 'main.html' %}

{% block content %}


<main class="auth layout">

{% if page == "login" %}

{# Login start #}
  <div class="container">

    <div class="layout__box">

      <div class="layout__boxHeader">

        <div class="layout__boxTitle">
          <h3>登录</h3>
        </div>

      </div>

      <div class="layout__body">

        <h2 class="auth__tagline">寻找你的学习伙伴.</h2>

        {# 登录表单 start #}
        <form method='POST' class="form" action="#">
          {% csrf_token %}
          <div class="form__group form__group">
            <label for="room_name">用户名</label>
            <input id="user" name="username" type="text" placeholder="请输入用户名" />
          </div>

          <div class="form__group">
            <label for="password">密码</label>
            <input
              id="password"
              name="password"
              type="password"
              placeholder="请输入密码"
            />
          </div>

          <button class="btn btn--main" type="submit">
            <svg
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              width="32"
              height="32"
              viewBox="0 0 32 32"
            >
              <title>lock</title>
              <path
                d="M27 12h-1v-2c0-5.514-4.486-10-10-10s-10 4.486-10 10v2h-1c-0.553 0-1 0.447-1 1v18c0 0.553 0.447 1 1 1h22c0.553 0 1-0.447 1-1v-18c0-0.553-0.447-1-1-1zM8 10c0-4.411 3.589-8 8-8s8 3.589 8 8v2h-16v-2zM26 30h-20v-16h20v16z"
              ></path>
              <path
                d="M15 21.694v4.306h2v-4.306c0.587-0.348 1-0.961 1-1.694 0-1.105-0.895-2-2-2s-2 0.895-2 2c0 0.732 0.413 1.345 1 1.694z"
              ></path>
            </svg>

            登录
          </button>

        </form>
        {# 登录表单 end #}

        <div class="auth__action">
          <p>首次使用 ？<a href="{% url 'register' %}" class="btn btn--link">点我注册</a></p>
        </div>

      </div>


    </div>

  </div>
{# login end #}

{% else %}

{# SignUp start #}
<main class="auth layout">

  <div class="container">

    <div class="layout__box">

      <div class="layout__boxHeader">

        <div class="layout__boxTitle">
          <h3>注册</h3>
        </div>

      </div>

      <div class="layout__body">

        <h2 class="auth__tagline">寻找你的学习伙伴.</h2>

<!--         注册表单 start -->
        <form method="POST" class="form" action="#">
          {% csrf_token %}

          {% for field in form %}
          <div class="form__group form__group">
            <label for="room_name">{{ field.label }}</label>
            {{ field }}
          </div>
          {% endfor %}



          <span><b>温馨提示：</b></span>
          <br/>
          <span><b>1.用户名: </b>只能包含字母、数字、特殊字符。</span>
          <span><b>2.密码：</b>不能与你用户名太相似；</span>
          <span>必须包含至少8个字符；不能全都是数字。不能是一个常见密码；</span>
          <span><b>3.校验: </b>为了校验，请输入两次完全相同的密码。</span><br/><br/>




<!--          注册按钮-->

          <button class="btn btn--main" type="submit">
            <svg
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              width="32"
              height="32"
              viewBox="0 0 32 32"
            >
              <title>lock</title>
              <path
                d="M27 12h-1v-2c0-5.514-4.486-10-10-10s-10 4.486-10 10v2h-1c-0.553 0-1 0.447-1 1v18c0 0.553 0.447 1 1 1h22c0.553 0 1-0.447 1-1v-18c0-0.553-0.447-1-1-1zM8 10c0-4.411 3.589-8 8-8s8 3.589 8 8v2h-16v-2zM26 30h-20v-16h20v16z"
              ></path>
              <path
                d="M15 21.694v4.306h2v-4.306c0.587-0.348 1-0.961 1-1.694 0-1.105-0.895-2-2-2s-2 0.895-2 2c0 0.732 0.413 1.345 1 1.694z"
              ></path>
            </svg>

            注册 并以此账号登录
          </button>
        </form>


        <div class="auth__action">
          <p>已有账号 ?<a href="{% url 'login' %}" class="btn btn--link">立即登录</a></p>

        </div>

      </div>

    </div>

  </div>

</main>
{# SignUp end #}



</main>


{% endif %}

{% endblock content %}

